<template>
  <div class="loginContainer">
    <NavBar>
      <div class="left head_goback"  slot="left" @click="onClickLeft">
        <svg width="18px" height="18px" xmlns="http://www.w3.org/2000/svg" version="1.1">
                <polyline points="12,18 4,9 12,0" style="fill:none;stroke:rgb(0,0,0);stroke-width:2"/>
        </svg></div>
      <div class="center" slot="center">修改密码</div>
    </NavBar>
    <van-form @submit="onSubmit" class="loginForm">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="oldpassword"
        type="password"
        name="旧密码"
        label="旧密码"
        placeholder="旧密码"
        :rules="[{ required: true, message: '请填写旧密码' }]"
      />
      <van-field
        v-model="newpassword"
        type="password"
        name="密码"
        label="新密码"
        placeholder="新密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
      />
      <van-field
        v-model="newspassword"
        type="password"
        name="密码"
        label="再次输入密码"
        placeholder="再次输入密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" @click="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar.vue";
import { Toast } from 'vant';

export default {
  data() {
    return {
      username: "",
      password: "",
      newpassword: "",
      oldpassword: "",
      newspassword: "",
    };
  },

  components: {
    NavBar,
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    onClickLeft() {
      this.$router.back()
    },
    submit(){  
      this.$router.back()
      Toast('修改成功');

    }
  },
};
</script>

<style lang="scss" scoped>

.loginContainer {
  padding-top: 1.95rem;
  p,
  span,
  input {
    font-family: Helvetica Neue, Tahoma, Arial;
  }
}
.loginForm {
  background-color: #fff;
  margin-top: 0.6rem;
}
</style>